<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>earth</title>
    <style>
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
      }
    </style>
  </head>
  <body>
    <div id="allmap"></div>
  </body>
</html>
<script
  type="text/javascript"
  src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=CPxHyHH5XD8mUnmRPbv9BehycOEklp34"
></script>
<script>
  const bmap = new BMapGL.Map("allmap", {
    minZoom: 8, // 最小缩放比例
    maxZoom: 12, // 最大缩放比例
    mapType: BMAP_EARTH_MAP, // 普通模式 BMAP_NORMAL_MAP 地球模式 BMAP_EARTH_MAP
  });
  // bmap.setMapType(BMAP_EARTH_MAP) 设置地球模式
  bmap.centerAndZoom(new BMapGL.Point(118.5, 27.5), 6);
  bmap.enableScrollWheelZoom(); // 开启鼠标滚轮缩放

  // 比例尺(距离单位)
  const scaleCtrl = new BMapGL.ScaleControl({
    anchor: BMAP_ANCHOR_TOP_LEFT, // 位置 TOP_LEFT TOP_RIGHT BOTTOM_RIGHT BOTTOM_LEFT
    offset: new BMapGL.Size(10, 10), // 位移量
  });
  bmap.addControl(scaleCtrl); // 添加比例尺(距离单位)

  // 缩放工具
  const zoomCtrl = new BMapGL.ZoomControl({
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
    offset: new BMapGL.Size(10, 10), // 位移量
  });
  bmap.addControl(zoomCtrl); // 添加缩放工具
</script>
